<template>
	<div v-if="songData">
		<!-- 全屏播放器 -->
		<div class="player" v-show="showPlayer">
			<!-- 背景 -->
			<div class="bg" :style="'background-image:url(' + songData.MusicImage + ');'"></div>
			<!-- 模糊度渐变盒子 -->
			<div class="shade"></div>

			<div class="view">
				<!-- 点击隐藏 下拉 -->
				<div class="btn" @click.stop="showPlayer = false">
					<span class="iconfont icon-xiala"></span>
				</div>

				<!-- 歌曲 作者 -->
				<div class="title">
					<h2>{{ songData.MusicName }}</h2>
					<div class="singer">
						<h3>
							<span>{{ songData.SName }}&nbsp;</span>
						</h3>
						<button @click="Gzchanged()" class="attention" :style="{background:bg_color, color: ft_color,}">{{attention}}</button>
					</div>

				</div>

				<!--图片 -->
				<div class="content">
					<div v-show="togglelyric" @click="togglelyric = false"
						:class="['img', 'play', { pause: iconplay }]">
						<img :src="songData.MusicImage" alt="" />
					</div>
					<!-- 歌词 -->
					<div class="lyrics" v-show="!togglelyric" @click="togglelyric = true">
						<ul :style="{ top: lyricTop }">
							<li v-for="(item, index) in lyric" :key="index" :class="{ con: currentRow == index }">
								{{ item.text }}
							</li>
						</ul>
					</div>
				</div>

				<!-- 字体图标 -->
				<div class="playIcon">
					<div class="iconfont icon-huaban"></div>
					<div class="iconfont icon-yinxiao"></div>
					<div class="iconfont icon-xiazai"></div>
					<div class="iconfont icon-duorentaolun" @click="shift = true"></div>
				</div>

				<!-- 滑块 -->
				<div class="range">
					<div class="bar">
						<span class="itemLeft">{{ timeLeft | playerTime }}</span>
						<van-slider v-model="value" bar-height="4px" inactive-color="#514E4C" active-color="#243DE2"
							@change="sliderchange">
							<template #button>
								<div class="custom-button"></div>
							</template>
						</van-slider>

						<span class="itemRight">{{ timeRight | playerTime }}</span>
					</div>
				</div>
				<!-- 音乐 字体图标 -->
				<div class="buttons">
					<div v-if="playerType == 1" @click="changeType" class="iconfont icon-shunxubofang1"></div>
					<div v-else-if="playerType == 2" @click="changeType" class="iconfont icon-danquxunhuan"></div>
					<div v-else-if="playerType == 3" @click="changeType" class="iconfont icon-suijibofang-wangyiicon">
					</div>
					<div v-else @click="changeType" class="iconfont icon-xunhuanbofang-wangyiicon"></div>
					<div class="iconfont icon-shangyiqu-wangyiicon" @click="startup"></div>
					<div :class="['iconfont',iconplay ? 'icon-zanting' : 'icon-bofang-wangyiicon',]"
						@click.stop="toggleplay"></div>
					<div class="iconfont icon-nextsong" @click="lowerFun"></div>
					<div class="iconfont icon-aixin" v-show="!change" @click="liked"></div>
					<div class="iconfont icon-xihuan-wangyiicon" style="color: hotpink" v-show="change" @click="delliked">
					</div>
				</div>
			</div>
		</div>

		<!-- 迷你播放器 -->
		<div :class="['mini-player', { btm: reBtm }, { btmChange: !reBtm }]" v-show="hide" v-if="songData"
			@click="showPlayer = true">
			<div :class="['img', 'play', { pause: iconplay }]">
				<img :src="songData.MusicImage" alt="" />
			</div>

			<div class="text">
				<h2>{{ songData.MusicName }}</h2>
				<h3>
					<span>{{ songData.SName }}</span>
				</h3>
			</div>

			<div class="control" @click.stop="toggleplay" style="color: #FFFFFF;">
				<span class="iconfont icon-bofang-wangyiicon" v-show="!iconplay"></span>
				<span class="iconfont icon-zanting" v-show="iconplay"></span>
			</div>

			<div class="menu" style="color: #FFFFFF;">
				<span class="iconfont icon-caidan"></span>
			</div>
		</div>

		<!-- 讨论 -->
		<div class="palyTable" v-show="shift">
			<div class="tabHead">
				<div class="iconfont icon-fanhuipt" @click="$router.go(-1), (shift = false)"></div>
				<p>评论</p>
			</div>
			<div class="playTalk">
				<van-cell is-link @click="showPopup">留言</van-cell>
				<van-tabs v-model="active">
					<van-tab title="热门评论">
						<div class="shotComment">
							<ul>
								<li v-for="(item, index) in hotCom" :key="index">
									<div class="left">
										<img :src="item.UserImg" />
									</div>
									<div class="right">
										<div class="content">
											<p>
												<span> {{ item.Uname }}:</span>
												{{ item.Info }}
											</p>
										</div>
										<div class="date">
											<p>{{ item.timeStr }}</p>

											<div class="font">
												<div class="iconfont icon-dianzan"></div>
												<span>({{ item.likedCount }})</span>
											</div>
										</div>
									</div>
								</li>
							</ul>
						</div>
					</van-tab>

					<!-- <van-tab title="最近评论">
						<div class="scomment">
							<h3></h3>
							<ul>
								<li v-for="(item, index) in com" :key="id">
									<div class="left">
										<img :src="item.UserImg" />
									</div>
									<div class="right">
										<div class="content">
											<p>
												<span> {{ item.user.Uname }}:</span>
												{{ item.Info }}
											</p>
										</div>
										<div class="date">
											<p>{{ item.timeStr }}</p>

											<div class="font">
												<div class="iconfont icon-dianzan"></div>
												<span>({{ item.likedCount }})</span>
											</div>
										</div>
									</div>
								</li>
							</ul>
						</div>
					</van-tab> -->
				</van-tabs>
			</div>
		</div>
		<van-popup v-model="show" position="bottom" :style="{ height: '30%' }">
			<van-field v-model="message" autosize row="3" label="留言" type="textarea" placeholder="请输入留言">
				<template #button>
					<van-button size="small" @click="leaveMes(message)" type="primary">发送</van-button>
				</template>
			</van-field>
		</van-popup>

		<!-- oncanplay	当媒介能够开始播放但可能因缓冲而需要停止时运行脚本 -->
		<!-- loadeddata 	当加载媒介数据时运行脚本 -->
		<!-- 音频播放器 -->
		<audio ref="audio" hidden controls :src="musicData" @loadeddata="loadeddataFun" @ended="endedFun"></audio>
	</div>
</template>

<script>
	// getLyric
	import {
		getSongDetail,
		getSongUrl,
		getLyric,
		getSelectLikeMusic
	} from "../../api/base";
	import {
		getPlaylistDetail,
		getPlayalbum
	} from "../../api/ranking";
	import {
		getCloudSearch
	} from "../../api/search";
	import {
		getArtists,
		getSingerComment,
		getliked,
		deletliked,
		getSliked,
		deletSliked
	} from "../../api/singer";
	import {
		getTalk
	} from "../../api/video";
	import {
		getUserRecent
	} from "../../api/myself";

	import {
		Toast
	} from "vant";
	// import { Dialog } from "vant";
	import {
		getFollowt,
	} from "../../api/follow.js";

	export default {
		props: [
			"playerId",
			"listId",
			"discId",
			"artists",
			"searchId",
			"reStyle",
			"mvmu",
			"recId",
		],
		data() {
			return {
				aliked: false,
				attention: '关注',
				bg_color: "#fef0f0",
				ft_color: "#f56c6c",
				musicData: "",
				Gzclick:1,
				iconplay: true, //播放按钮
				songData: null, //歌曲信息
				value: 0, // 滑块 滚动条 0-100
				showPlayer: false, //全屏播放器状态
				timeRight: 0, //右侧时间
				timeLeft: 0, //左侧时间
				clearset: null, //定时器
				playerList: [], //播放列表 
				playerLists:[ 
					{
						1:[{ id:null }],
					},
					{
						2:[{ id:null }, ],
					} ,
					{
						3:[{ id:null }, ],
					} ,
					{
						4:[{ id:null }, ],
					} ,
					{
						5:[{ id:null }, ],
					} ,
					{
						6:[{ id:null }, ],
					} ,
					{
						7:[{ id:null }, ],
					} ,
					{
						8:[{ id:null }, ],
					} ,
					
					{
						9:[{ id:null }, ],
					} ,
					{
						10:[{ id:null }, ],
					} ,
					{
						11:[{ id:null }, ],
					} ,
					{
						12:[{ id:null }, ],
					} ,
					{
						13:[{ id:null }, ],
					} ,
					{
						14:[{ id:null }, ],
					} ,
					{
						15:[{ id:null }, ],
					} ,
					{
						16:[{ id:null }, ],
					} ,
					{
						17:[{ id:null }, ],
					} ,
					{
						18:[{ id:null }, ],
					} ,
					{
						19:[{ id:null }, ],
					} ,
					{
						20:[{ id:null }, ],
					} ,
						], 
				togglelyric: true, //歌词切换
				lyric: [], //歌词数组
				lyricTop: "200px", //歌词位置
				currentRow: 0, //歌词高亮
				playerType: 3, //播放類型 1.列表播放 2.单曲循环 3.随机播放 4.循环播放
				reBtm: true, //控制css
				hide: true, //进入视频
				hotCom: null,
				com: null,
				active: 0,
				shift: false,
				message: null,
				show: false,
				change: false,
				userid:0,
				userName:""
			};
		},
		methods: {
			favor() {
				getFollowt({
					Uid:this.userid,
					Sid: this.songData.Sid,
				}).then((data)=>{
						if (data.code==0) {
					this.attention = "已关注";
					this.bg_color = "#f56c6c";
					this.ft_color = "#fef0f0";
					this.Gzclick = data.code
				} else {
					this.attention = "关注"
					this.bg_color = "#fef0f0";
					this.ft_color = "#f56c6c";
					this.Gzclick = data.code
				}
				});
			

			},
			Gzchanged() {
				if(this.Gzclick==1){
				getSliked({
					Uid:this.userid,
					Sid: this.songData.Sid,
				}).then((data)=>{
				this.favor();
				});
				}else{
					deletSliked({
					Uid:this.userid,
					Sid: this.songData.Sid,
				}).then((data)=>{
				this.favor();
				});
				}
			},
			goback() {
				
				
			},
			// 获取歌曲url
			getSongUrlFun() {
				getSongUrl({
					id: this.playerId
				}).then((data) => {
					// console.log(data);
					this.musicData = data.data.Music;
					this.iconplay = true;
					this.getSingerCommentFun();
					this.userid=window.localStorage.getItem("uid")
					this.userName=window.localStorage.getItem("uName")
					this.getLikeMusic();
				});
			},
			//获取歌曲信息,请求参数ids
			getSongDetailFun() {
				getSongDetail({
					id: this.playerId
				}).then((data) => {
					console.log("aaaaaaaa"+data.data.Sid);
					this.songData = data.data;
					this.favor();
				});
			},
			// 播放暂停音乐
			toggleplay() {
				if (this.iconplay) {
					this.$refs.audio.play(); //播放音乐

					clearInterval(this.clearset);
					this.clearset = setInterval(() => {
						let currentTime = this.$refs.audio.currentTime; // 获取实时变化时间
						let duration = this.$refs.audio.duration; // 总时间
						this.timeLeft = currentTime;
						// 计算滚动条值
						this.value = (currentTime / duration) * 100;
						if (this.value == 100) {
							clearInterval(this.clearset);
							this.$refs.audio.pause(); //暂停音乐
							this.iconplay = true;
						}
					}, 999);
				} else {
					this.$refs.audio.pause(); //暂停音乐
					clearInterval(this.clearset);
				}
				this.iconplay = !this.iconplay; //切换页面
			},
			// 音乐加载完成后,获取音乐数据
			loadeddataFun() {
				console.log("音乐加载完成");
				console.log(this.$refs);
				this.toggleplay(); //切换自动播放
				let duration = this.$refs.audio.duration;
				this.timeRight = duration;
			},
			// 获取滚动条变化
			sliderchange() {
				var duration = (this.$refs.audio.duration * this.value) / 100;
				this.timeLeft = duration; //修改页面数据
				this.$refs.audio.currentTime = duration; //修改播放时间
			},
			// 下一首歌
			lowerFun() {
				let id = this.songData.id; // 获取id
				console.log("wze"+this.songData.MusicName);
				// 获取在播放歌曲列表中下标
				let index = this.playerLists.findIndex((item) => item.id == id);
				// 获取当前歌曲下标,下标加一,下一首歌.如果最后一首歌,重置为零回到第一首歌
				index = index + 1 > this.playerLists.length - 1 ? 0 : index + 1;
				// 返回父组件歌曲id
				this.$emit("set-player-id", this.playerLists[index].id);//修改父组件id值
								console.log(this.playerList[index].id);
								this.getLikeMusic();
								this.favor();
			},

			//上一首歌
			startup() {
				let id = this.songData.id; // 获取id
				// 获取在播放歌曲列表中下标
				let index = this.playerLists.findIndex((item) => item.id == id);
				// 获取当前歌曲下标,下标减一,上一首歌.如果小于0,重置为最后一首歌
				index = index - 1 < 0 ? this.playerLists.length - 1 : index - 1;
				// 返回父组件歌曲id
				this.$emit("set-player-id", this.playerLists[index].id); //修改父组件id值
				this.getLikeMusic();
				this.favor();
			},

			// 获取歌曲歌词
			getLyricFun() {
				getLyric({
					id: this.playerId
				}).then((data) => {
					console.log(data.data.MusicLyric);
					this.formatLyric(data.data.MusicLyric);
				});
			},

			// 处理歌词结构
			formatLyric(text) {
				this.lyric = [];
				let arr = text.split("\n"); //把原歌词切割成字符串
				let row = arr.length; //获取数组长度
				for (let i = 0; i < row; i++) {
					let temp_row = arr[i];
					let temp_arr = temp_row.split("]");
					let lyrictext = temp_arr.pop(); //删除数组最后一个,返回值
					temp_arr.forEach((el) => {
						// console.log(el);
						let obj = {};
						// [00:00.000 => [00,00.000]
						let time_arr = el.substr(1, el.length - 1).split(":");
						let sec = time_arr[0] * 60 + Math.ceil(time_arr[1]); //把分钟变成秒
						obj.text = lyrictext;
						obj.time = sec;
						if (lyrictext.length > 0) {
							this.lyric.push(obj); //每一行歌词处理后放入数组中
						}
					});
				}
				console.log(this.lyric);
			},

			// 播放类型切换
			changeType() {
				this.playerType =
					this.playerType == 1 ?
					2 :
					this.playerType == 2 ?
					3 :
					this.playerType == 3 ?
					4 :
					1;
				if (this.playerType == 1) {
					Toast("列表播放");
				} else if (this.playerType == 2) {
					Toast("单曲循环");
				} else if (this.playerType == 3) {
					Toast("随机循环");
				} else {
					Toast("循环播放");
				}
			},

			// 音乐播放结束后
			endedFun() {
				console.log("音乐播放结束");

				this.iconplay = true;
				// 根据播放音乐类型,选择下一首播放
				if (this.playerType == 1) {
					//列表
					// 列表播放
					this.lowerFun(); //下一首歌
				} else if (this.playerType == 2) {
					//单曲
					let id = this.songData.id; // 获取id
					this.$emit("set-player-id", id);
					// 音乐加载完成后,获取音乐数据
					this.loadeddataFun();
				} else if (this.playerType == 3) {
					//随机
					let index = parseInt(Math.random() * this.playerLists.length);
					this.$emit("set-player-id", this.playerLists[index].id);
				} else {
					//循环
					this.lowerFun(); //下一首歌
				}
			},

			//评论
			getSingerCommentFun() {
				// console.log(this.playerId);
				getSingerComment({
					page:1,
					limit:10,
					Uname:"",
					Mid:this.playerId
					}).then((data) => {
					// console.log(data);
					this.hotCom = data.data;
					console.log(this.hotCom);
					 // this.com = data.data;
					// console.log(this.hotCom);
					// console.log(this.com);
				});
			},

			leaveMes(msg) {
				getTalk({
					Info: msg,
					mid: this.playerId,
					uid: this.userid,
					UName:this.userName
				}).then(
					(data) => {
						this.getSingerCommentFun();
						console.log(data);
						// this.com.unshift(data.comments);
					}
				);
				this.message = null;
				this.show = false;
			},
			showPopup() {
				this.show = true;
			},
			getLikeMusic() {
				getSelectLikeMusic({
					mid: this.playerId,
					uid:this.userid
				}).then((data) => {
					if(data.code==0){
						this.change = true;
					}else{
						this.change = false;
					}
				});
			},
			liked() {
				// let index = this.playerId.findIndex(item=>item.)
				getliked({
					music:"aaaa",
					mid: this.playerId,
					uid:this.userid
				}).then((data) => {
					console.log(data);
					this.getLikeMusic();
				});
			},
			delliked() {
				// let index = this.playerId.findIndex(item=>item.)
				deletliked({
					mid:this.playerId,
					uid:this.userid
				}).then((data) => {
					console.log(data);
					this.getLikeMusic();
				});
			},
		},
		// 侦听器,只要数据修改,重新执行
		watch: {
			// 侦听播放id
			playerId() {
				this.getSongUrlFun(); //歌曲url
				this.getSongDetailFun(); //歌曲信息
				this.getLyricFun(); //歌曲歌词
			},
			// 侦听播放列表id
			listId() {
				console.log("歌单数据");
				getPlaylistDetail({
					id: this.listId
				}).then((data) => {
					console.log(data);
					this.playerLists[1].id=data.data.Mid1;
					this.playerLists[2].id=data.data.Mid2;
					this.playerLists[3].id=data.data.Mid3;
					this.playerLists[4].id=data.data.Mid4;
					this.playerLists[5].id=data.data.Mid5;
					this.playerLists[6].id=data.data.Mid6;
					this.playerLists[7].id=data.data.Mid7;
					this.playerLists[8].id=data.data.Mid8;
					this.playerLists[9].id=data.data.Mid9;
					this.playerLists[10].id=data.data.Mid10;
					this.playerLists[11].id=data.data.Mid11;
					this.playerLists[12].id=data.data.Mid12;
					this.playerLists[13].id=data.data.Mid13;
					this.playerLists[14].id=data.data.Mid14;
					this.playerLists[15].id=data.data.Mid15;
					this.playerLists[16].id=data.data.Mid16;
					this.playerLists[17].id=data.data.Mid17;
					this.playerLists[18].id=data.data.Mid18;
					this.playerLists[19].id=data.data.Mid19;
					this.playerLists[20].id=data.data.Mid20;
					console.log(this.playerLists);
				});
			},
			//新碟 侦听播放列表id
			discId() {
				getPlayalbum({
					id: this.discId
				}).then((data) => {
					console.log(data);
					this.playerLists = data.songs; //获取歌单数据
					console.log(this.playerLists);
				});
			},
			//歌手 侦听播放列表id
			artists() {
				getArtists({
					id: this.artists
				}).then((data) => {
					console.log(data);
					this.playerLists = data.hotSongs; //获取歌单数据
					console.log(this.playerLists);
				});
			},
			searchId() {
				getCloudSearch({
					keywords: this.searchId
				}).then((data) => {
					console.log(data);
					this.playerLists = data.result.songs; //获取歌单数据
					console.log(this.playerLists);
				});
			},
			mvmu() {
				// this.toggleplay();
				this.iconplay = this.mvmu; //切换页面
				this.$refs.audio.pause(); //暂停音乐
				this.hide = this.mvmu;
			},
			recId() {
				getUserRecent({
					uid: this.recId
				}).then((data) => {
					console.log(data);
					let index = [],
						arr = [];
					index = data.allData; //获取歌单数据
					for (let i = 0; i < index.length; i++) {
						arr.push(index[i].song);
					}
					this.playerLists = arr;
					console.log(this.playerLists);
				});
			},
			// 左测歌时间变化
			timeLeft() {
				for (let i = 0; i < this.lyric.length; i++) {
					if (parseInt(this.timeLeft) <= this.lyric[i].time) {
						this.lyricTop = 200 - i * 36 + "px";
						this.currentRow = i; //歌词高亮
						break;
					}
				}
			},

		},
		filters: {
			playerTime(data) {
				let min = parseInt(data / 60); //分钟
				let sec = parseInt(data % 60); //秒
				if (min == 0 && sec == 0) {
					return "0:00";
				} else {
					return min + ":" + (sec < 10 ? "0" + sec : sec); //01
				}
			},
		},
		beforeUpdate() {
			console.log(this.reStyle);
			this.reBtm = this.reStyle;
		},
	};
</script>

<style lang="less">
	// 全屏播放器
	.player {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 1);
		color: #fff;
		z-index: 2;

		.bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			// background-image: url("https://p2.music.126.net/e5cvcdgeosDKTDrkTfZXnQ==/109951166155165682.jpg");
			background-size: 100%;
			background-repeat: no-repeat;
			background-position: 50%;
			transform: scale(1.8);
			transform-origin: center center;
			filter: blur(30px); //模糊度
			opacity: 1; //清晰度
			z-index: 2;
		}

		.shade {
			position: absolute;
			z-index: 3;
			left: 0;
			bottom: 0;
			height: 50%;
			width: 100%;
			background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), #000);
		}

		.view {
			position: relative;
			z-index: 4;
			left: 0;
			bottom: 0;
			height: 100%;
			width: 100%;
			background: rgba(0, 0, 0, 0.2);

			.btn {
				position: absolute;
				left: 13px;
				top: 15px;
				font-weight: bold;

				span {
					font-size: 22px;
				}
			}

			.title {
				text-align: center;
				padding-top: 10px;
				margin-bottom: 26px;

				display: flex;
				flex-direction: column;

				h2 {
					font-size: 20px;
				}

				.singer {
					display: flex;
					// align-self: stretch;
					align-self: center;

					// left: 36%;
					h3 {
						font-size: 14px;
						padding-top: 8px;
					}

					.attention {
						// position: relative;
						// margin-left: 140px;
						// top: -26px;
						// border: solid #243DE2;
						// background-color: #DDDEF0;
						// color: #243DE2;
						color: #f56c6c;
						background: #fef0f0;
						border: #fbc4c4 solid;
						border-radius: 14px;
						text-align: center;
						padding: 4px 16px;
						padding-top: 2px;
						font-weight: bold;
						font-size: 16px;
						-webkit-transform: scale(0.7);
					}
				}

			}

			.content {
				text-align: center;
				height: 63%;
				width: 100%;
				position: relative;

				.img {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					margin: auto;
					width: 300px;
					height: 300px;
					border-radius: 50%;
					background: rgba(0, 0, 0, 0.3);

					img {
						margin: 0 auto;
						width: 274px;
						height: 274px;
						border-radius: 50%;
						padding-top: 13px;
					}

					&.play {
						animation: rotate 20s linear infinite;
					}

					&.pause {
						animation-play-state: paused;
					}
				}

				.lyrics {
					width: 100%;
					height: 100%;
					position: relative;
					overflow: hidden;

					ul {
						position: absolute;
						width: 100%;
						top: 180px;
						left: 0px;

						// transition: all 0.3s linear;
						li {
							height: 36px;
							line-height: 36px;
							color: #cbcccc;
							font-size: 16px;
							overflow: hidden;

							&.con {
								color: #fff;
							}
						}
					}
				}
			}

			.playIcon {
				display: flex;
				justify-content: space-around;
				height: 5%;
				text-align: center;

				.iconfont {
					font-size: 25px;
				}
			}

			.range {
				position: absolute;
				width: 100%;
				left: 0;
				bottom: 110px;
				text-align: center;

				.bar {
					width: 66%;
					margin: auto;
					position: relative;
					font-size: 14px;

					.itemLeft {
						position: absolute;
						left: -40px;
						top: -6px;
					}

					.itemRight {
						position: absolute;
						right: -40px;
						top: -6px;
					}
				}
			}

			.buttons {
				display: flex;
				position: absolute;
				bottom: 40px;
				width: 100%;

				.iconfont {
					flex: 1;
					width: 20%;
					text-align: center;
					font-size: 24px;
					line-height: 38px;
					color: #fff;

					&:nth-of-type(3) {
						font-size: 35px;
					}
				}
			}
		}
	}

	// 滑块->块
	.custom-button {
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background-color: #243DE2;
		border: 5px solid #fff;
	}

	// 迷你播放器
	.mini-player {
		z-index: 1;
		position: fixed;
		left: 0;
		width: 100%;
		height: 52px;
		background-color: rgba(41, 45, 57, 0.95);
		display: flex;
		margin: 0;
		padding: 0;

		.img {
			width: 37px;
			height: 37px;
			margin: 7px 9px 0 17px;
			background-color: lightskyblue;
			border-radius: 50%;

			img {
				width: 37px;
				width: 37px;
				border-radius: 50%;
			}

			&.play {
				animation: rotate 20s linear infinite;
			}

			&.pause {
				animation-play-state: paused;
			}
		}

		.text {
			flex: 1;

			h2 {
				font-size: 16px;
				line-height: 16px;
				color: #FFFFFF;
				margin-top: 12px;
			}

			h3 {
				line-height: 12px;
				font-size: 12px;
				color: #FFFFFF;
				padding-right: 2px;
			}
		}

		.control {
			text-align: center;
			width: 30px;
			height: 30px;
			line-height: 30px;
			margin: 10px 14px 0 0;

			span {
				font-size: 36px;
				line-height: 36px;
			}
		}

		.menu {
			text-align: center;
			width: 30px;
			height: 30px;
			line-height: 26px;
			margin: 12px 14px 0 0;

			span {
				font-size: 30px;
				line-height: 30px;
			}
		}
	}

	.btm {
		bottom: 0px;
	}

	.btmChange {
		bottom: 50px;
	}

	@keyframes rotate {
		0% {
			transform: rotate(0);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.palyTable {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 2;

		.tabHead {
			width: 100%;
			min-height: 30px;
			line-height: 30px;
			font-size: 20px;
			background-color: #0F172A;
			color: #fff;
			text-align: center;
			display: flex;
			padding: 8px 0px;
			box-sizing: border-box;
			text-align: center;

			.iconfont {
				flex: 0 0 30px;
			}

			p {
				flex: 1;
				padding-right: 30px;
				text-align: center;
			}
		}

		.playTalk {
			padding: 10px;
			background-color: #fff;

			.van-tabs__line {
				background-color: #243DE2;
			}

			.shotComment,
			.scomment {
				ul {
					li {
						display: flex;
						padding: 15px 0;
						border-bottom: 1px solid #aaa;

						.left {
							padding-right: 10px;
							width: 90px;
							height: 90px;

							img {
								width: 90px;
								height: 90px;
								border-radius: 80%;
							}
						}

						&:last-child {
							border-bottom: 0px;
						}

						.right {
							width: 100%;

							.content {
								p {
									font-size: 14px;
									color: #333;

									span {
										font-size: 16px;
										color: #0c73c2;
									}
								}
							}

							.date {
								display: flex;
								justify-content: space-between;
								padding-top: 8px;
								line-height: 25px;

								p {
									font-size: 14px;
									flex: 1;
								}

								.font {
									display: flex;

									span {
										font-size: 12px;
									}

									.iconfont {
										color: #0c73c2;
										font-size: 25px;
									}
								}
							}
						}
					}
				}
			}
		}
	}
</style>
